<!-- 分享链接卡片 -->
<template>
  <div class="share__link__card" ref="share__link__card">
    <div ref="share__link__container" class="flex pl-4 pr-4 pt-4" style="height: 128px;">
      <!-- 图片 -->
      <div class="share__link__image relative">
        <span>
          <img :src="props.image" style="max-height: 100px; max-width: 100px" width="90"/>
        </span>
        <div class="share__link__collect absolute">
          收藏量: {{ props.collect }}
        </div>
      </div>
      <!-- 链接描述 -->
      <div class="share__link__detail" style="overflow: auto;">
        <div class="share__link__panel">
          <span class="share__link__title m-text-overflow-ellipsis-1">
            <a :href="props.link" target="_blank">{{ props.title }}</a>
          </span>
          <span class="share__link__desc mt-3 m-text-overflow-ellipsis-3">
            {{ props.desc }}
          </span>
        </div>
      </div>
    </div>
    <!-- 标签介绍 -->
    <div ref="share__link__tags" class="flex justify-content-end pb-4">
      <div class="share__link__tags m-1" v-for="(item, index) of props.tags" :key="index">
        <TagPanel :content="item"/>
      </div>
    </div>
    <!-- 操作 -->
    <div ref="share__link__action" class="share__link__action grid m-0">
      <div class="col-4 share__link__action__item share__link__border-right">
        <Button class="p-button-rounded p-button-text" :icon="PrimeIcons.HEART" v-tooltip.top="'收藏'"></Button>
      </div>
      <div class="col-4 share__link__action__item share__link__border-right">
        <Button @click="copyToClip(props.link)" class="p-button-rounded p-button-text" :icon="PrimeIcons.SHARE_ALT"
                v-tooltip.top="'分享'"></Button>
      </div>
      <div class="col-4 share__link__action__item share__link__border-right">
        <Button @click="openToLink(props.link)" class="p-button-rounded p-button-text" :icon="PrimeIcons.SIGN_IN"
                v-tooltip.top="'访问'"></Button>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
/** JS */
import {ref, defineProps, onMounted, nextTick, reactive, watch} from 'vue';
import toast from '@/utils/Toast';
/** 组件 */
import TagPanel from '@/components/panel/TagPanel.vue';
import {PrimeIcons} from 'primevue/api';

interface ShareLinkCard {
  image: string
  title: string
  desc: string
  link: string
  tags: string[]
  collect: number
}


/**
 * 复制内容到粘贴板
 *
 * @param content 需要复制的内容
 */
function copyToClip(content: string) {
  let aux = document.createElement('input');
  aux.setAttribute('value', content);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand('copy');
  document.body.removeChild(aux);
  toast.success('好东西就要分享', '已经将链接放置粘贴板了哦，快去分享给你的朋友吧！~🤭', 1500);
}

/**
 * 打开链接
 *
 * @param link 链接
 */
function openToLink(link: string) {
  let a = document.createElement('a');
  a.setAttribute('href', link);
  a.setAttribute('target', '_blank');
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

/** 钩子 */
const props = defineProps<ShareLinkCard>(), shareLinkContainer = ref(null);
const renderValues: ShareLinkCard = reactive({
  image: props.image,
  title: props.title,
  desc: props.desc,
  link: props.link,
  tags: props.tags,
  collect: props.collect,
});
watch(props, (n) => Objects.assign(renderValues, props), {deep: true})


/** 调整高度 */
const share__link__card = ref(null),
    share__link__container = ref(null),
    share__link__tags = ref(null),
    share__link__action = ref(null);

onMounted(() => {
  nextTick(() => {
    if (share__link__card.value && share__link__container.value && share__link__tags.value && share__link__action.value) {
      let height = share__link__container.value.clientHeight + share__link__tags.value.clientHeight + share__link__action.value.clientHeight;
      share__link__card.value.style.height = height + 1 + 'px';
    }
  })
})
</script>

<style lang="less" scoped>
.share__link__card {
  &:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 5px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px 3px !important;
    cursor: pointer;

    a {
      color: red !important;
    }
  }

  box-sizing: border-box;
  float: left;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  transition: .3s box-shadow;
}

.share__link__image {
  display: inline-block;
}

.share__link__detail {
  display: inline-block;
  margin: 5px 15px;
  overflow: auto;
}

.share__link__tags {
  display: block;
}

.share__link__title {
  color: rgba(0, 0, 0, .85) !important;
  font-size: 17px !important;
  font-weight: 500 !important;

  a {
    color: rgba(0, 0, 0, .85) !important;

    &:hover {
      text-decoration: none;
    }

    transition: color .15s;
  }
}

.share__link__collect {
  color: rgba(0, 0, 0, .45) !important;
  font-size: 14px !important;
  margin: 15px 5px;
}

.share__link__desc {
  color: rgba(0, 0, 0, .45) !important;
  font-size: 12px !important;
}

.share__link__action {
  border-top: 1px solid #f0f0f0;
}

.share__link__action__item {
  display: flex;
  align-items: center !important;
  justify-content: center !important;

  &:not(:last-child) {
    border-right: 1px solid #f0f0f0;
  }
}
</style>
